<template>
    <!--文件上传icon显示列表-->
    <div>
        <a v-for="item in iconList" :key="item.uid" :href="item.url" target="_blank" rel="noopener noreferrer">
            <svg-icon v-if="typeof item.name === 'string'" :name="getIconType(item.name)" />
        </a>
    </div>
</template>

<script lang="ts">
    const fileSuffixList = [
        'jpg',
        'jpeg',
        'png',
        'gif',
        'doc',
        'docx',
        'xls',
        'xlsx',
        'ppt',
        'pptx',
        'pdf',
        'ogg',
        'mp3',
        'wav',
        'mp4',
        'm4v',
        'webm'
    ]
    import SvgIcon from '@/components/Icon'
    export default {
        name: 'UploadIcon',
        components: {
            SvgIcon
        },
        props: {
            iconList: {
                type: Array,
                default: () => []
            }
        },
        setup() {
            const getIconType = (fileName: string) => {
                // 文件后缀名,统一转为小写，作为icon类型使用
                const fileSuffix = fileName.split('.').pop()?.toLocaleLowerCase() ?? ''
                return fileSuffixList.includes(fileSuffix) ? fileSuffix : 'file'
            }
            return {
                getIconType
            }
        }
    }
</script>
